<?php include '../public/header.php' ?>
<?php include '../public/header_index.php' ?>
<style>
    html{overflow-x: hidden;}
    .seadiv{width:100%;margin: 10px 0 20px 1%}
    .seadiv #seabutton{background-color: #409EFF;border-radius: 4px;height: 36px;line-height: 36px;margin-left: 5px}
    #flowDiv{width: 100%;padding: 0 1%;}
    .ftits{height: 40px;line-height: 40px;background-color: #F5F5F5;margin-bottom: 15px;}
    .ftits span{margin-left: 10px}
    .fboxs{width: 100%;}
    .fboxs .box{width: 22%;margin-right: 3%;height: 130px;float: left;box-shadow:1px 1px 7px 2px #ccc;margin-bottom: 25px;
        position: relative;border-radius: 3px;border:1px solid #FFFFFF}
    .fboxs .box:nth-child(4),
    .fboxs .box:nth-child(8),
    .fboxs .box:nth-child(16){
        margin-right: 0;
    }
    .fboxs .box:hover{transform  : scale(1.03)}
    .fboxs .four{margin-right: 0}
    .fboxs .box .nums{width: 50px;height: 50px;font-size: 40px;line-height: 50px;background-color: #6ECFFA;color: #FFFFFF;
        font-weight: bold;text-align: center;border-radius: 3px;position: relative;left: 20px;top: 25px}
    .fboxs .box .numsoff{background-color: #eeeeee!important;}
    .fboxs .box .nameoff{color: #aaaaaa!important;}
    .fboxs .box .botinfo{height:35px;position: relative;bottom: -7px;background-color: #F0F6FF;color: #777777;line-height: 35px;border-radius: 3px;padding: 0 10px 0 20px;font-size: 12px}
    .fboxs .box .name{margin-left:80px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;position: relative;top:-20px;font-weight: bold;padding-right: 10px}
    .fboxs .box .explain{margin-left:80px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;position: relative;top:-16px;padding-right: 10px;color: #777777}
    .fboxs .box .opt{position: absolute;right: 10px;color: #B9B9B9;font-size: 25px;top: 4px;cursor: pointer;z-index: 99}
    .fboxs .box .optlist{width: 75px;height: 70px;background-color: #FFFFFF;z-index: 99;text-align: center;display: none;
        top: 22px;position: absolute;right: 0;border-radius: 3px;box-shadow:1px 1px 7px 2px #ccc;font-size: 14px;color: #555}
    .fboxs .box .optlist .but{margin: 10px;0}
    .fboxs .box .optlist .but:hover{color: #409EFF!important;}
    .fboxs .box .optlist .but i{margin-right: 6px}
    .clear{clear: both}


    body::-webkit-scrollbar {
        width: 0;
    }
</style>
<body class="laytp-container">
<div id="opt_nav">
    <ul class="layui-nav">
    </ul>
</div>
<div class="layui-card" style="display: block;background: none;" id="search-form">
    <div class="layui-card-body" style="margin: 0;padding: 10px 0">
        <form class="layui-form" id="TableSearchFormId" lay-filter="TableSearchForm" onkeydown="keyTableSearch('TableSearchForm', 'datalist')">
            <div class="layui-form-item">
                <div class="layui-row">
                    <div class="layui-col-md3">
                        <label class="layui-form-label">流程名称</label>
                        <div class="layui-input-block">
                            <input type="text" name="name" id="name" placeholder="请输入" class="layui-input" autocomplete="off">
                        </div>
                    </div>
                    <div class="layui-col-md3">
                        <label class="layui-form-label">状态</label>
                        <div class="layui-input-block">
                            <select id="status" name="status" lay-filter="status" >
                                <option value="">请选择</option>
                                <option value="1">启用</option>
                                <option value="0">禁用</option>
                            </select>
                        </div>
                    </div>
                    <div class="layui-col-md3">
                        <div class="layui-form-item search-div">
                            <div class="layui-form-item layui-inline">
                                <button class="laytp-btn laytp-btn-md laytp-btn-primary" id="TableSearchButton" type="button"><i class="layui-icon layui-icon-search"></i>查询</button>
                                <button class="layui-btn layui-btn-primary" onclick="listTableReset()" id="TableSearchReset" type="reset" ><i class="layui-icon layui-icon-refresh"></i>重置</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>
<div class="layui-card" style="background: none">
    <div class="layui-card-body" style="padding: 10px 0">
        <div id="flowDiv">
<!--            <div class="ftits"><span><b>证书（ 5 ）</b></span></div>-->
<!--            <div class="fboxs">-->
<!--                <div class="box">-->
<!--                    <div class="opt" onmouseover="showopt(this)" onmouseout="hideopt(this)">-->
<!--                        <i class="fa fa-ellipsis-h"></i>-->
<!--                        <div class="optlist">-->
<!--                            <div class="but showbut_edit"><i class="fa fa-pencil"></i>编辑</div>-->
<!--                            <div class="but showbut_delete"><i class="fa fa-trash"></i>删除</div>-->
<!--                        </div>-->
<!--                    </div>-->
<!--                    <div class="nums">1</div>-->
<!--                    <div class="name">标题内容</div>-->
<!--                    <div class="explain">描述温习为你描描述温习为你描述温习为你做文字做文字描述温习为你描述温习为你做文字做文字述温习为你做文字做文字</div>-->
<!--                    <div class="botinfo">-->
<!--                        <span class="float-l">最后更新：张三（2021-07-08）</span>-->
<!--                        <span class="float-r colorhong">未配置</span>-->
<!--                    </div>-->
<!--                </div>-->
<!--            </div>-->
<!--            <div style="clear: both"></div>-->
        </div>
    </div>
</div>
<script>

    layui.use(['laytp','button'], function() {
        var form = layui.form;
        get_data();
        $("#TableSearchButton").click(function(){
            searchTableFunc();
        });
        form.on('select(status)',function (data) {
            searchTableFunc();
        });
    });
    function get_data(name='',status='') {
        $("#flowDiv").html('');
        layui.use(['laytp','button'], function() {
            var form = layui.form;
            facade.ajax({url: ask_flow_class_list,data:{name:name,status:status}}).done(function(res){
                if (res['code'] === 2000) {
                    var data = res.data.data;
                    // var butauth = res.data.butauth;
                    var str = ''
                    for (var key in data){
                        var children = data[key].children;
                        if(children.length < 1){
                            continue;
                        }
                        str += '<div class="ftits"><span><b>'+data[key].name+'（ '+children.length+' ）</b></span></div>';
                        str += '<div class="fboxs">';
                        for (var ii in children){
                            var nums = parseInt(ii)+1;

                            if(nums%4 == 0){
                                str += '<div class="box four">';
                            }else{
                                str += '<div class="box">';
                            }
                            // if(butauth.length > 0){
                                str += '<div class="opt" onmouseover="showopt(this)" onmouseout="hideopt(this)">';
                                str += '<i class="fa fa-ellipsis-h"></i>';
                                str += '<div class="optlist">';
                                str += '<div class="but" onclick="edit_data(\''+children[ii].id+'\')">编辑</div>';
                                if(children[ii].status > 0){
                                    str += '<div class="but" onclick="status_data(\''+children[ii].id+'\')">禁用</div>';
                                }else{
                                    str += '<div class="but" onclick="status_data(\''+children[ii].id+'\')">启用</div>';
                                }
                                str += '</div>';
                                str += '</div>';
                            // }


                            if(children[ii].status > 0){
                                str += '<div class="nums">'+nums+'</div>';
                                str += '<div class="name">'+children[ii].name+'</div>';
                                str += '<div class="explain" title='+children[ii].explain+'>'+children[ii].explain+'</div>';
                            }else{
                                str += '<div class="nums numsoff">'+nums+'</div>';
                                str += '<div class="name nameoff">'+children[ii].name+'<span>（已禁用）</span></div>';
                                str += '<div class="explain nameoff" title='+children[ii].explain+'>'+children[ii].explain+'</div>';
                            }
                            str += '<div class="botinfo">';
                            str += '<span class="float-l">最后更新：'+children[ii].laster_name+children[ii].lastdt+'</span>';
                            if(children[ii].ispublish){
                                str += '<span class="float-r colorlv">已发布</span>';
                            }else{
                                str += '<span class="float-r colorhong">未发布</span>';
                            }

                            str += '</div>';
                            str += '</div>';
                        }
                        str += '</div>';
                        str += '<div class="clear"></div>';
                    }
                    $("#flowDiv").html(str);
                }
                render_from();
            });
        });
    }


    function searchTableFunc() {
        var name = $("#name").val();
        var status = $("#status").val();
        get_data(name, status);
    }

    function edit_data(id) {
        openPageEdit('edit.php?close=1&id='+id);
    }

    function status_data(id) {
        layui.use(['laytp','button'], function() {
            var form = layui.form;
            facade.ajax({url: ask_flow_class_status,data:{id:id}}).done(function(res){
                if (res['code'] === 2000) {
                    facade.success("提交成功!");
                    searchTableFunc();
                }
            });
        });
    }


    function showopt(obj) {
        $(obj).find('.optlist').show();
    }
    function hideopt(obj) {
        $(obj).find('.optlist').hide();
    }
</script>
</body>
</html>
